<template>
    <view class="page">
        <view class="return-title"><image src="../../../static/icons/jewel/success.png"></image>{{orderData.active_text}}</view>
		<view class="price-list">
			<view class="item"><view class="name">申请退款金额</view><view class="num red">¥{{orderData.order_amount}}</view></view>
			<view class="item"><view class="name">退回{{orderData.refund_account_type}}</view><view class="num gray">¥{{orderData.real_refund_money}}</view></view>
			<view class="steps">
				<uni-steps :options="statusList" :active="active" stepType="jewel"></uni-steps>
			</view>
		</view>
		<view class="prod-info">
			<view class="info-title">退款信息</view>
			<view class="prod">
				<view><image :src="orderData.goods_img"></image></view>
				<view class="info">
					<view class="prod-name f-two-ellipsis">{{orderData.goods_name}}</view>
					<view class="prod-value">{{orderData.item_names}}</view>
				</view>
			</view>
			<view class="info-list">
				<view class="li">申请类型：{{orderData.apply_type_text}}</view>
				<view class="li">是否收到货：{{orderData.shstate_text}}</view>
				<view class="li">退款原因：{{orderData.apply_reason}}</view>
				<view class="li">退款金额：¥{{orderData.real_refund_money}}</view>
				<view class="li">申请件数：{{orderData.buy_num}}</view>
				<view class="li">申请时间：{{orderData.apply_time}}</view>
				<view class="li">退款编号：{{orderData.order_no}}</view>
			</view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
    </view>
</template>

<script>
    import hl from '@/common/common_zb.js';
    export default {
        data() {
            return {
				active:0,
				bIsShowLoading: false,
                statusList: [],
				order_id: 0,	// 订单id
				orderData: [],
            }
        },
        onLoad(options) {
			this.order_id = options.order_id;
			this.get_refund_info({order_id: options.order_id});
        },
        methods: {
			get_refund_info(data){
				let that = this;
				that.bIsShowLoading = true;
				hl.get('order/refund_info', data, true, function (res){
					that.bIsShowLoading = false;
					let resdata =res.data;
					if(resdata.code == '-1') {
						hl.showToast(resdata.msg,1500);
						setTimeout(function(){
							uni.navigateBack({});
						}, 1500)
						return false;
					}
					that.statusList = resdata.data.statusList;
					that.active = resdata.data.active;
					that.orderData = resdata.data;
				})
			}
		}
    }
</script>

<style>
	
    .page {
        background: #ffffff;
    }
	.return-title{
		background: #d71511;
		height: 142upx;
		overflow: hidden;
		color: #ffffff;
		font-size: 46upx;
		display: flex;
		align-items: center;
	}
    .return-title image{
		width: 66upx;
		height: 66upx;
		margin-left: 62upx;
		margin-right: 20upx;
	}
	.price-list{
		color: #454545;
		font-size: 34upx;
	}
	.price-list .item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 96upx;
		padding: 0 30upx;
		border-bottom: 1px solid #d9d9d9;
	}
	.price-list .item:last-child{
		border-bottom: none;
	}
	.price-list .red{
		color: #d71511;
		font-size: 40upx;
	}
	.steps{
		background: #f3f3f3;
		padding-top: 40upx;
		padding-bottom: 26upx;
	}
	.prod-info .info-title{
		color: #454545;
		font-size: 34upx;
		line-height: 86upx;
		padding: 0 30upx;
	}
	.prod-info .prod{
		background: #F3F3F3;
		padding: 20upx 24upx;
		display: flex;
	}
	.prod-info .prod image{
		width: 120upx;
		height: 120upx;
		display: block;
	}
	.prod-info .prod .info{
		flex: 1;
		margin-left: 20upx;
	}
	.prod-info .prod .prod-name{
		font-size: 30upx;
		color: #454545;
	}
	.info-list{
		padding: 0 32upx;
		color: #929292;
		font-size: 26upx;
		line-height: 46upx;
		padding-top: 20upx;
	}
	.prod-value{
		color: #999999;
	}
</style>
